<!-- 新增或编辑建筑 -->
 <template>
    <div style="height: 480px; overflow: hidden">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120">
            <Row>
                <Col span="12">
                    <FormItem label="父级建筑" prop="PARENT_BD_GUID">
                        <!-- :disabled="formValidate.id != '' || formValidate.PARENT_BD_GUID != ''" -->
                        <!-- :disable-branch-nodes="true" -->
                        <treeselect
                            :options="options"
                            v-model="formValidate.PARENT_BD_GUID"
                            :show-count="true"
                            placeholder="请选择父级建筑"
                        />
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="建筑名称" prop="BD_FULL_NAME">
                        <!-- :disabled="formValidate.id != ''" -->
                        <Input v-model="formValidate.BD_FULL_NAME" placeholder="请输入建筑名称"></Input>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="12">
                    <FormItem label="建筑简称" prop="BD_NAME">
                        <!-- :disabled="formValidate.id != ''" -->
                        <Input v-model="formValidate.BD_NAME" placeholder="请输入建筑简称"></Input> </FormItem
                ></Col>
                <Col span="12">
                    <FormItem label="建筑字母别名" prop="BD_ALIAS">
                        <!-- :disabled="formValidate.id != ''" -->
                        <Input v-model="formValidate.BD_ALIAS" placeholder="请输入建筑字母别名"></Input>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="12">
                    <FormItem label="建筑编码" prop="BD_ID">
                        <!-- :disabled="formValidate.id != ''" -->
                        <Input v-model="formValidate.BD_ID" placeholder="请输入建筑编码"></Input> </FormItem
                ></Col>
                <Col span="12">
                    <FormItem label="建筑区域分类" prop="AREA_TYPE">
                        <Select v-model="formValidate.AREA_TYPE" clearable style="width: 100%">
                            <Option v-for="item in dictItem.BD_AREA_TYPE" :value="item.value" :key="item.value">{{ item.desc }}</Option>
                        </Select>
                    </FormItem></Col
                >
            </Row>

            <Row>
                <Col span="12">
                    <FormItem label="建筑用途" prop="BD_USE_ID">
                        <Select v-model="formValidate.BD_USE_ID" clearable style="width: 100%">
                            <Option v-for="item in dictItem.BD_USE" :value="item.value" :key="item.value">{{ item.desc }}</Option>
                        </Select>
                    </FormItem></Col
                >
                <Col span="12">
                    <FormItem label="建筑功能" prop="BD_FUN_ID">
                        <Select v-model="formValidate.BD_FUN_ID" clearable style="width: 100%">
                            <Option v-for="item in dictItem.BD_FUN" :value="item.value" :key="item.value">{{ item.desc }}</Option>
                        </Select>
                    </FormItem></Col
                >
            </Row>

            <Row>
                <Col span="12">
                    <FormItem label="建筑细化分类" prop="BD_TYPE_ID">
                        <Select v-model="formValidate.BD_TYPE_ID" clearable style="width: 100%">
                            <Option v-for="item in dictItem.H_JZQY" :value="item.value" :key="item.value">{{ item.desc }}</Option>
                        </Select>
                    </FormItem></Col
                >

                <Col span="12">
                    <FormItem label="建筑使用人数" prop="PERSON_COUNT">
                        <!-- :disabled="formValidate.id != ''" -->
                        <Input v-model="formValidate.PERSON_COUNT" placeholder="请输入建筑使用人数"></Input> </FormItem
                ></Col>
            </Row>

            <Row>
                <Col span="12">
                    <FormItem label="排序号" prop="ORDER_NO">
                        <!-- :disabled="formValidate.id != ''" -->
                        <Input type="number" v-model="formValidate.ORDER_NO" placeholder="请输入排序号"></Input> </FormItem
                ></Col>
                <Col span="12">
                    <FormItem label="建筑面积" prop="BD_AREA">
                        <!-- :disabled="formValidate.id != ''" -->
                        <Input type="number" v-model="formValidate.BD_AREA" placeholder="请输入建筑面积"></Input> </FormItem
                ></Col>
            </Row>

            <FormItem label="备注" prop="REMARK">
                <!-- :disabled="formValidate.id != ''" -->
                <Input type="textarea" v-model="formValidate.REMARK" placeholder="请输入备注"></Input>
            </FormItem>

            <FormItem>
                <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                <!-- <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button> -->
            </FormItem>
        </Form>
    </div>
</template>



<script>
import {AjaxCommon} from '@/libs/apiCommon'
import {PopupCommon} from '@/libs/popupCommon'
import {Utility} from '@/libs/utility'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
    props: ['setData', 'type'],
    components: {Treeselect},
    data() {
        return {
            value: null,
            options: [],
            formValidate: {
                PARENT_BD_GUID: '',
                BD_ID: '',
                BD_FULL_NAME: '',
                BD_NAME: '',
                BD_ALIAS: '',
                ORDER_NO: '',
                BD_AREA: '',
                BD_USE_ID: '',
                BD_FUN_ID: '',
                BD_TYPE_ID: '',
                AREA_TYPE: '',
                // BD_FUN: '',
                REMARK: '',
                PERSON_COUNT: '',
                BD_GUID: ''
            },
            ruleValidate: {
                BD_FULL_NAME: [{required: true, message: '请填写建筑名称', trigger: ['blur', 'change']}],
                BD_NAME: [{required: true, message: '请填写建筑简称', trigger: ['blur', 'change']}],
                AREA_TYPE: [{required: true, message: '请选择建筑分类', trigger: ['blur', 'change']}],
                BD_USE: [{required: true, message: '请选择建筑用途', trigger: ['blur', 'change']}],
                BD_FUN: [{required: true, message: '请选择建筑功能', trigger: ['blur', 'change']}],
                PERSON_COUNT: [{required: true, message: '请输入建筑使用人数', trigger: ['blur', 'change']}],
                ORDER_NO: [{required: true, message: '请输入排序号', trigger: ['blur', 'change']}],
                BD_TYPE_ID: [{required: true, message: '请选择建筑细化分类', trigger: ['blur', 'change']}]
            },
            dictItem: {
                /** 建筑区域分类 */
                BD_AREA_TYPE: [],
                /** 建筑用途 */
                BD_USE: [],
                /** 建筑功能 */
                BD_FUN: [],
                /** 建筑细化分类 */
                H_JZQY: []
            }
        }
    },
    methods: {
        async initDict() {
            // desc: "工业建筑"
            // enable : "1"
            // id: "F9FA688425A64341BAA1BAE17AD8EB39"
            // value:"GYJZ"
            const res = await Promise.all([
                Utility.getDictListByTypeCode('BD_AREA_TYPE'),
                Utility.getDictListByTypeCode('BD_USE'),
                Utility.getDictListByTypeCode('BD_FUN'),
                Utility.getDictListByTypeCode('H_JZQY')
            ])
            // 建筑区域分类
            const BD_AREA_TYPE = res[0]
            // 建筑用途
            const BD_USE = res[1]
            // 建筑功能
            const BD_FUN = res[2]
            // 建筑细化分类
            const H_JZQY = res[3]
            this.dictItem = {
                BD_AREA_TYPE,
                BD_USE,
                BD_FUN,
                H_JZQY
            }
        },
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    const data = this.formValidate

                    this.$emit('getData', data)
                }
            })
        },
        // handleReset(name) {
        //     this.$refs[name].resetFields()
        // }
        async initParentMenu() {
            const allBuild = await AjaxCommon(`/api/Build/GetAllBuild`, 'get', null)
            console.log(allBuild)
            const buildList = allBuild?.data?.Message ?? []
            let allBuildTree = []
            if (buildList.length > 0) {
                allBuildTree = Utility.arrayCascade(buildList, (c, p) => c.PARENT_BD_GUID == p.BD_GUID, 'children')
            }
            if (allBuildTree && allBuildTree.length > 0) {
                let treeDataList = []
                Utility.createBuildTreeData(allBuildTree, treeDataList)
                if (treeDataList && treeDataList.length > 0) {
                    this.options = [
                        {
                            id: '',
                            label: '顶级父节点'
                        }
                    ].concat(treeDataList)
                }
            } else {
                this.options = [
                    {
                        id: '',
                        label: '顶级父节点'
                    }
                ]
            }
        }
    },
    created() {
        const type = this.type
        this.initDict()
        // 编辑 或 新增子级
        if (this.setData && type == 'edit') {
            this.formValidate = this.setData
        }
        this.initParentMenu()
    },
    mounted() {}
}
</script>
